/**
 * @author 14544
 * @date 2020/3/31 14:12
 */
// 请注意：到目前为止，对于 fetch 方法的 upload 过程，还没有方法去追踪它。如果想要监听上传过程，请使用 XMLHttpRequest。
// 中止 fetch 有一点点棘手。请记住，fetch 返回 promise。但是 JavaScript 并没有 “中止” promise 的概念。所以我们要如何取消 fetch 呢？
// 有一个特殊的内置对象是基于此目的的：AbortController。 这是一个实验性功能，IE上不兼容

// 控制器是个极其简单的对象。它具有一个 abort() 方法和一个 signal 属性。当 abort() 被调用时，abort 事件就会在 controller.signal 上触发。

// 简单的示例
/*{
    const controller = new AbortController();
    const signal = controller.signal
    // 当 abort() 被调用时，abort 事件就会在 controller.signal 上触发。
    signal.onabort = function (e) {
        console.log('中止了请求')
    }

    let btn = document.createElement('button');
    btn.innerText = '中止'
    // 点击触发中止事件
    btn.onclick = function () {
        controller.abort()
    }
    document.body.appendChild(btn);
}*/

// 在fetch 中使用
let TEST_URL = '/gov/gov.do?methodname=queryDocStatuses&serviceid=gov_status';
{
    const controller = new AbortController();
    fetch(TEST_URL, {
        method: "GET",
        signal: controller.signal  // 将 signal 属性传递给 fetch 选项    现在 fetch 侦听 signal。
    })
        .then(res => res.json())
        .then(data => {
            console.log(data)
        })
        .catch(err => {  // 当一个 fetch 被中止，它的 promise rejects 一个名为 AbortError 的错误，所以我们应该处理它：
            if (err.name === 'AbortError') {
                console.error("请求中止了," + controller.signal.aborted);
            } else {
                throw err;
            }
        })

    let btn = document.createElement('button');
    btn.innerText = '中止'
    // 点击触发中止事件
    btn.onclick = function () {
        controller.abort()
    }
    document.body.appendChild(btn);
}